<template>
	<view class="container">
		<view class="list-item">
			<view class="listimg">
				<image class="listimg" src="/static/img/shequ.png" mode=""></image>
			</view>
			
			<view class="list">
				<text class="list-money">{{$t('kuan.xuanzeshulian')}}</text>
				<view class="list-items" :class="{Active:ictive==index}" v-for="(item,index) in Data" @click="dianday(index,item)">
					<text>{{item}}{{$t('kuan.currency_usdt')}}</text>
				</view>
			</view>
		</view>
		
		<!-- 社区节点 -->
		<view class="touzhi">
			<view class="touzhidingdan" @click="gojilu">
				<text class="touzhidingdan1">{{$t('kuan.duizhangfuli')}}</text>
				<text>{{$t('jiedianxq')}}></text>
			</view>
			<view class="touzhidingdan2">
				<view class="touzhizonger">
					<text class="touzhizonger1">{{touzi}} USDT</text>
					<!-- <text>{{$t('kuan.qianggoujine')}}</text> -->
				</view>
				<view class="touzhiimg">
					<image src="/static/icon/usdt.jpg" mode=""></image>
				</view>
			</view>
			<view class="leiji">
				<text>{{$t('kuan.leijishouyi')}}</text>
				<text>{{fenyong}} USDT</text>
			</view>
		
		</view>
		
		<!-- 立即购买按钮 -->
		<view class="lijizulin" @click="lijizulin">
			<text>{{$t('kuan.sumbit')}}</text>
		</view>
		<!-- 弹窗对话框 -->
		<uni-popup ref="popup" type="center">
			<view class="zulintk">
				<view class="guanbi">
					<image @click="close" class="guanbi1" src="/static/icon/guanbi.png" mode=""></image>
				</view>
				<view class="zulinmoney">
					<text>{{rujin}}{{$t('kuan.currency_usdt')}}</text>
				</view>
				<!-- <view class="zuanzhe">
					<text>{{$t('kuan.zhifu')}}</text>
					<radio-group class="zuanzhe1" @change="radioChange">
						<label v-for="(item,index) in radioItems" :key="index">
							<view  class="zuanzhe2">
							<radio class="zuanzhe2-radio" borderColor="#e6e6e6" backgroundColor="#2d2d32" :value="item.value" :checked="index == current"></radio>
							<view>{{item.name}}</view>	
							</view>
						</label>
					</radio-group>
				</view> -->
				<view class="querenzulin" @click="CreateOrder">
					<text>{{$t('kuan.sumbit')}}</text>
				</view>
			</view>
		</uni-popup>
		    <!-- 以下是该组件使用的全部属性 -->
		    <sanshui-payment-password  v-model="showModal":mode="1" :digits="6" @submit="submitHandle" />

	</view>
</template>

<script>
	//引入组件文件
	import SanshuiPaymentPassword from '../../components/sanshui-payment-password/sanshui-payment-password.vue'
	import web3WalletService from '@/api/web3.js'
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	export default {
		mixins: [walletMixin],
		components:{
		            SanshuiPaymentPassword
		        },
		data() {
			return {
				radioItems: [{
						value: '0',
						name: '',
						checked: 'true'
					}
				],
				current:0,
				Data: ['5000'],
				// Data: ['0.1','0.2','0.3'],
				ictive:0,
				rujin:"5000",
				paymentWalletAddress: '', // 收款钱包地址
				walletConnected: false, // 钱包连接状态
				usdtBalance: '0.00', // USDT余额
				paymentStatus: 'pending', // 支付状态: pending, success, failed
				orderId: '', // 订单ID
				txHash: '', // 交易哈希
				checkTimer: null, // 定时器
				touzi:'0',
				fenyong:'0',
				userinfo:{},
				showModal: false,
				zjc:"false",
				zfpass:"false"
			}
		},
		onLoad(){
			uni.setNavigationBarTitle({
			  title:  this.$t('kuan.duizhangfuli'), // 必填，页面标题）
			 })
			  this.getlicailist()
			  this.getuserinfo()
		},
		onShow() {
			 this.getuserinfo()
		},

		mounted() {
			
			// 设置i18n实例
			web3WalletService.setI18n(this.$i18n);
			// 设置动态货币名称
			this.radioItems[0].name = this.$t('kuan.currency_usdt');

			  // 测试多语言是否正常工作
			  console.log('当前语言:', this.$i18n.locale);
            console.log('测试多语言键值:');
            console.log('kuan.currency_usdt:', this.$t('kuan.currency_usdt'));
            console.log('wallet.payment.insufficient_balance:', this.$t('wallet.payment.insufficient_balances'));
            console.log('common.success:', this.$t('common.success'));
            
			
			// 尝试自动连接钱包
			this.autoConnectWallet();
			// 添加页面卸载监听器
			this.addPageUnloadListener();
		},
		beforeDestroy() {
			// 移除页面卸载监听器
			this.removePageUnloadListener();
		},
		methods: {
			// 获取个人资料
			getuserinfo() {
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userinfo = res[1].data.list[0]
						this.zfpass=this.userinfo.zfpass
						this.zjc=this.userinfo.zjc
			
					}
			
				})
			},
			// 获取社区节点
			getlicailist() {
				let data = {
					yema:1,
					yezhi:10
				}
				let opts = {
					url: '/order/Getshequlist',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('获取社区节点', res);
					if (res[1].data.state == 'success') {
						this.touzi = res[1].data.touzi
						this.fenyong = res[1].data.fenyong
			
					}
			
				})
			},
			// 社区记录
			gojilu:Debounce(function(){
				this.$tab.navigateTo('/pages/my/mykuanji')
			},1000),
			// 选择金额
			dianday(index,item) {
				this.ictive=index
				this.rujin=item
			},
			radioChange(e) {
				this.current=e.detail.value
			},
			// 打开弹窗
			lijizulin(){
				this.$refs.popup.open('center')
			},
			// 输入支付密码
			payment(){
				if(this.zjc==="false"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/zhujici')
				}else if(this.zjc==="true"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/yanzengzhuci?type=1')
				}else if(this.zjc==="true"&&this.zfpass==="true"){
					this.showModal = true
				}
				
			},
			// 支付密码验证
			submitHandle(e) {
			  if(e.type=="true"){
				  this.CreateOrder()
			  }
			},
			// 创建订单并支付
			 CreateOrder:Debounce(async function(){
				try {
					// console.log('开始创建订单并支付...');
					
					// 确保钱包已连接
					if (!web3WalletService.isWalletConnected()) {
						// console.log('钱包未连接，尝试连接...');
						this.$modal.msg(this.$t('wallet.payment.connecting_wallet'));
						const connectResult = await web3WalletService.connectBSC();
						if (!connectResult.success) {
							this.$modal.msg(this.$t('wallet.payment.connect_wallet_failed'));
							return;
						}
						this.walletConnected = true;
						// console.log('钱包连接成功:', connectResult);
						// 加载USDT余额
						await this.loadUSDTBalance();
					} else {
						// console.log('钱包已连接');
					}

					// 检查钱包地址与登录用户是否一致
					const currentAddress = web3WalletService.getCurrentAccount();
					const tokenAddress = this.getTokenUserAddress();
					
					if (currentAddress && tokenAddress && currentAddress.toLowerCase() !== tokenAddress.toLowerCase()) {
						// console.log('钱包地址不匹配，当前地址:', currentAddress, 'token地址:', tokenAddress);
						this.$modal.msg(this.$t('wallet.payment.wallet_mismatch'));
						// 可以选择自动重新登录或提示用户手动操作
						await this.handleWalletMismatch();
						return;
					}

					// 获取钱包地址
					// console.log('获取收款地址...');
					const walletResult = await this.getWalletAddress();
					if (!walletResult.success) {
						this.$modal.msg(this.$t('wallet.payment.get_address_failed'));
						return;
					}
					// console.log('收款地址:', this.paymentWalletAddress);

					// 检查USDT余额
					// console.log('检查USDT余额...');
					// console.log('原始usdtBalance值:', this.usdtBalance);
					// console.log('usdtBalance类型:', typeof this.usdtBalance);
					const balance = parseFloat(this.usdtBalance);
					const amount = parseFloat(this.rujin);
					// console.log('转换后余额:', balance, '类型:', typeof balance);
					// console.log('转换后金额:', amount, '类型:', typeof amount);
					// console.log('余额检查结果:', balance >= amount ? '余额充足' : '余额不足');
					// console.log('余额比较详情:', { balance, amount, isBalanceValid: !isNaN(balance), isAmountValid: !isNaN(amount) });
					
					if (isNaN(balance) || isNaN(amount)) {
						// console.error('余额或金额转换失败');
						this.$modal.msg(this.$t('wallet.payment.insufficient_balance'));
						return;
					}
					
					if (balance < amount) {
						// console.log('余额不足，显示提示');
						this.$modal.msg(this.$t('wallet.payment.insufficient_balance'));
						return;
					}
					// console.log('余额检查通过，继续创建订单...');

					// 创建订单
					// console.log('创建订单...');
					let data = {
						money: this.rujin,
						type: "1"
					}
					let opts = {
						url: '/order/Addorder',
						method: 'POST'
					};
					
					const orderRes = await this.api.httpTokenRequest(opts, data);
					// console.log('创建订单结果:', orderRes);
					// console.log('订单状态:', orderRes[1].data.state);
					// console.log('订单消息:', orderRes[1].data.msg);
					
					// 检查订单创建是否成功（基于消息）
					// console.log('检查订单创建成功条件:');
					// console.log('订单消息:', orderRes[1].data.msg);
					// console.log('成功关键词:', this.$t('common.success'));
					// console.log('是否包含成功关键词:', orderRes[1].data.msg && orderRes[1].data.msg.includes(this.$t('common.success')));
					
					if (orderRes[1].data.msg && orderRes[1].data.msg.includes(this.$t('common.success'))) {
						this.orderId = orderRes[1].data.order;
						// console.log('订单创建成功，订单ID:', this.orderId);
						
						// 进行支付
						// console.log('开始USDT支付...');
						// console.log('支付前检查 - 收款地址:', this.paymentWalletAddress);
						// console.log('支付前检查 - USDT余额:', this.usdtBalance);
						// console.log('支付前检查 - 支付金额:', this.rujin);
						
						this.$modal.msg(this.$t('wallet.payment.payment_initiated'));
						const payResult = await this.payWithUSDT();
						// console.log('支付结果:', payResult);
						
						if (payResult.success) {
							// 支付成功，通知后端
							await this.notifyPaymentSuccess();
							// 关闭弹窗
							this.close();
						}
					} else {
						// console.log('订单创建失败:', orderRes[1].data.msg);
						this.$modal.msg(orderRes[1].data.msg);
					}
				} catch (error) {
					// console.error('创建订单和支付失败:', error);
					this.$modal.msg(this.$t('wallet.payment.operation_failed'));
				}
			},1000),
			
			// 获取钱包地址（返回Promise）
			getWalletAddress() {
				return new Promise((resolve, reject) => {
					let opts = {
						url: '/xgt/GetmoneyDizhi',
						method: 'GET'
					};
					this.api.httpTokenRequest(opts, {}).then(res => {
						// console.log('获取钱包地址', res);
						if (res[1].data.state == 'success' && res[1].data.list && res[1].data.list.length > 0) {
							this.paymentWalletAddress = res[1].data.list[0].dizhi;
							resolve({ success: true, address: this.paymentWalletAddress });
						} else {
							resolve({ success: false, error: this.$t('wallet.payment.get_address_failed') });
						}
					}).catch(err => {
						// console.error('获取钱包地址失败', err);
						resolve({ success: false, error: this.$t('wallet.payment.get_address_failed') });
					});
				});
			},
			// 自动连接钱包
			async autoConnectWallet() {
				try {
					const result = await web3WalletService.autoConnect();
					if (result.success) {
						this.walletConnected = true;
						this.loadUSDTBalance();
					}
				} catch (error) {
					// console.log('自动连接钱包失败:', error);
				}
			},
			// 连接钱包
			async connectWallet() {
				try {
					const result = await web3WalletService.connectBSC();
					if (result.success) {
						this.walletConnected = true;
						this.loadUSDTBalance();
						this.$modal.msg(this.$t('wallet.connect_success'));
					} else {
						this.$modal.msg(result.error || this.$t('wallet.connect_failed'));
					}
				} catch (error) {
					// console.error('连接钱包失败:', error);
					this.$modal.msg(this.$t('wallet.connect_failed'));
				}
			},
			// 检查钱包连接状态
			checkWalletConnection() {
				this.walletConnected = web3WalletService.isWalletConnected();
				if (this.walletConnected) {
					this.loadUSDTBalance();
				}
			},
			// 加载USDT余额
			async loadUSDTBalance() {
				try {
					// console.log('开始加载USDT余额...');
					const balance = await web3WalletService.getUSDTBalance();
					// console.log('获取到的USDT余额:', balance);
					this.usdtBalance = balance;
					// console.log('设置后的usdtBalance:', this.usdtBalance);
				} catch (error) {
					// console.error('获取USDT余额失败:', error);
					this.usdtBalance = '0.00';
				}
			},
			// 格式化地址显示
			formatAddress(address) {
				return web3WalletService.formatAddress(address);
			},
			

			// USDT支付
			async payWithUSDT() {
				// console.log('开始USDT支付流程...');
				
				// 再次确认钱包连接状态
				if (!web3WalletService.isWalletConnected()) {
					// console.log('钱包连接检查失败');
					this.$modal.msg(this.$t('wallet.payment.wallet_disconnected'));
					return { success: false, error: this.$t('wallet.payment.wallet_disconnected') };
				}
				// console.log('钱包连接状态正常');

				if (!this.paymentWalletAddress) {
					// console.log('收款地址为空');
					this.$modal.msg(this.$t('wallet.payment.wallet_address_missing'));
					return { success: false, error: this.$t('wallet.payment.wallet_address_missing') };
				}
				// console.log('收款地址:', this.paymentWalletAddress);

				// 检查余额
				const balance = parseFloat(this.usdtBalance);
				const amount = parseFloat(this.rujin);
				// console.log('payWithUSDT - 余额检查详情:');
				// console.log('原始usdtBalance:', this.usdtBalance, '类型:', typeof this.usdtBalance);
				// console.log('转换后余额:', balance, '类型:', typeof balance);
				// console.log('转换后金额:', amount, '类型:', typeof amount);
				// console.log('余额比较详情:', { balance, amount, isBalanceValid: !isNaN(balance), isAmountValid: !isNaN(amount) });
				
				if (isNaN(balance) || isNaN(amount)) {
					// console.error('payWithUSDT - 余额或金额转换失败');
					this.$modal.msg(this.$t('wallet.payment.insufficient_balance'));
					return { success: false, error: this.$t('wallet.payment.insufficient_balance') };
				}
				
				if (balance < amount) {
					// console.log('payWithUSDT - 余额不足，显示提示');
					this.$modal.msg(this.$t('wallet.payment.insufficient_balance'));
					return { success: false, error: this.$t('wallet.payment.insufficient_balance') };
				}

				try {
					// console.log('调用web3WalletService.transferUSDT...');
					this.$modal.msg(this.$t('wallet.payment.payment_initiated'));
					
					// 调用USDT转账
					const result = await web3WalletService.transferUSDT(this.paymentWalletAddress, amount);
					// console.log('transferUSDT返回结果:', result);
					
					if (result.success) {
						this.txHash = result.txHash;
						this.paymentStatus = 'pending';
						this.$modal.msg(this.$t('wallet.payment.transaction_sent'));
						// console.log('交易哈希:', this.txHash);
						
						// 立即通知后端交易已发送
						await this.notifyPaymentPending();
						
						// 显示成功消息，不等待确认
						this.$modal.msg(this.$t('wallet.payment.transaction_sent'));
						
						// 可选：后台等待交易确认（不影响用户体验）
						this.waitForTransactionConfirmBackground();
						
						return { success: true, txHash: this.txHash };
					} else {
						this.paymentStatus = 'failed';
						// console.log('支付失败:', result.error);
						this.$modal.msg(result.error || this.$t('wallet.payment.payment_failed'));
						return { success: false, error: result.error || this.$t('wallet.payment.payment_failed') };
					}
				} catch (error) {
					// console.error('支付失败:', error);
					this.paymentStatus = 'failed';
					this.$modal.msg(this.$t('wallet.payment.payment_failed') + ': ' + error.message);
					return { success: false, error: this.$t('wallet.payment.payment_failed') + ': ' + error.message };
				}
			},
			
			// 等待交易确认（后台）
			async waitForTransactionConfirmBackground() {
				// 后台确认，不影响用户体验
				setTimeout(async () => {
					try {
						let checkCount = 0;
						const maxChecks = 20; // 最多检查20次（60秒）
						
						const checkInterval = setInterval(async () => {
							try {
								checkCount++;
								const status = await web3WalletService.checkTransactionStatus(this.txHash);
								
								if (status === 'success') {
									clearInterval(checkInterval);
									this.paymentStatus = 'success';
									// 通知后端交易确认成功
									await this.notifyPaymentSuccess();
									// console.log('交易确认成功');
								} else if (status === 'failed') {
									clearInterval(checkInterval);
									this.paymentStatus = 'failed';
									// console.log('交易确认失败');
								} else if (checkCount >= maxChecks) {
									clearInterval(checkInterval);
									this.paymentStatus = 'timeout';
									// console.log('交易确认超时');
								}
								// pending状态继续等待
							} catch (error) {
								// console.error('检查交易状态失败:', error);
								if (checkCount >= maxChecks) {
									clearInterval(checkInterval);
								}
							}
						}, 3000); // 每3秒检查一次
					} catch (error) {
						// console.error('后台交易确认失败:', error);
					}
				}, 1000); // 延迟1秒开始检查
			},

			// 等待交易确认（原始方法，保持兼容性）
			async waitForTransactionConfirm() {
				return new Promise((resolve) => {
					let checkCount = 0;
					const maxChecks = 20; // 最多检查20次（60秒）
					
					const checkInterval = setInterval(async () => {
						try {
							checkCount++;
							const status = await web3WalletService.checkTransactionStatus(this.txHash);
							
							if (status === 'success') {
								clearInterval(checkInterval);
								this.paymentStatus = 'success';
								this.$modal.msg(this.$t('wallet.payment.payment_success'));
								resolve({ success: true, txHash: this.txHash });
							} else if (status === 'failed') {
								clearInterval(checkInterval);
								this.paymentStatus = 'failed';
								this.$modal.msg(this.$t('wallet.payment.payment_failed'));
								resolve({ success: false, error: this.$t('wallet.payment.payment_failed') });
							} else if (checkCount >= maxChecks) {
								clearInterval(checkInterval);
								this.paymentStatus = 'failed';
								this.$modal.msg(this.$t('wallet.payment.payment_timeout'));
								resolve({ success: false, error: this.$t('wallet.payment.payment_timeout') });
							}
							// pending状态继续等待
						} catch (error) {
							// console.error('检查交易状态失败:', error);
							if (checkCount >= maxChecks) {
								clearInterval(checkInterval);
								resolve({ success: false, error: this.$t('wallet.payment.check_transaction_failed') });
							}
						}
					}, 3000); // 每3秒检查一次
				});
			},

			// 通知后端支付待处理（交易已发送）
			async notifyPaymentPending() {
				if (!this.orderId || !this.txHash) return;
				
				let data = {
					orderId: this.orderId,
					txHash: this.txHash,
					amount: this.rujin,
					status: 'pending'
				};
				let opts = {
					url: '/order/NotifyPayment',
					method: 'POST'
				};
				
				try {
					const res = await this.api.httpTokenRequest(opts, data);
					// console.log('通知交易已发送:', res);
				} catch (err) {
					// console.error('通知交易发送失败:', err);
				}
			},

			// 通知后端支付成功
			async notifyPaymentSuccess() {
				if (!this.orderId || !this.txHash) return;
				
				let data = {
					orderId: this.orderId,
					txHash: this.txHash,
					amount: this.rujin,
					status: 'success'
				};
				let opts = {
					url: '/order/NotifyPayment',
					method: 'POST'
				};
				
				try {
					const res = await this.api.httpTokenRequest(opts, data);
					// console.log('通知支付成功:', res);
				} catch (err) {
					// console.error('通知支付成功失败:', err);
				}
			},

			// 关闭弹窗
			close(){
				this.$refs.popup.close()
			},

			// 添加页面卸载监听器
			addPageUnloadListener() {
				// 监听页面卸载事件
				window.addEventListener('beforeunload', this.handlePageUnload);
				window.addEventListener('unload', this.handlePageUnload);
				
				// 监听移动端应用切换到后台
				document.addEventListener('visibilitychange', this.handleVisibilityChange);
			},

			// 移除页面卸载监听器
			removePageUnloadListener() {
				window.removeEventListener('beforeunload', this.handlePageUnload);
				window.removeEventListener('unload', this.handlePageUnload);
				document.removeEventListener('visibilitychange', this.handleVisibilityChange);
			},

			// 处理页面卸载
			handlePageUnload() {
				// 如果有待确认的交易，立即通知后端
				if (this.txHash && this.paymentStatus === 'pending') {
					this.notifyPaymentPending();
				}
			},

			// 处理可见性变化
			handleVisibilityChange() {
				if (document.hidden && this.txHash && this.paymentStatus === 'pending') {
					// 页面隐藏时，如果有待确认的交易，通知后端
					this.notifyPaymentPending();
				}
			},

			// 获取token对应的用户地址
			getTokenUserAddress() {
				try {
					const userInfo = uni.getStorageSync('userinfo');
					if (userInfo && userInfo.dizhi) {
						return userInfo.dizhi;
					}
					return null;
				} catch (error) {
					console.error('获取token用户地址失败:', error);
					return null;
				}
			},

			// 处理钱包地址不匹配
			async handleWalletMismatch() {
				try {
					const currentAddress = web3WalletService.getCurrentAccount();
					
					// 提示用户当前钱包地址与登录账户不匹配
					const confirmResult = await this.$modal.confirm({
						title: this.$t('wallet.payment.wallet_mismatch_title'),
						content: this.$t('wallet.payment.wallet_mismatch_content', { 
							current: this.formatAddress(currentAddress),
							logged: this.formatAddress(this.getTokenUserAddress())
						}),
						confirmText: this.$t('wallet.payment.relogin'),
						cancelText: this.$t('wallet.payment.cancel')
					});

					if (confirmResult) {
						// 用户选择重新登录
						await this.reloginWithCurrentWallet();
					}
				} catch (error) {
					console.error('处理钱包地址不匹配失败:', error);
					this.$modal.msg(this.$t('wallet.payment.wallet_mismatch_error'));
				}
			},

			// 使用当前钱包重新登录
			async reloginWithCurrentWallet() {
				try {
					const currentAddress = web3WalletService.getCurrentAccount();
					if (!currentAddress) {
						this.$modal.msg(this.$t('wallet.payment.get_current_address_failed'));
						return;
					}

					this.$modal.msg(this.$t('wallet.payment.relogin_progress'));
					
					// 使用当前钱包地址重新登录
					const loginResult = await this.api.httpRequest({
						url: '/user/Userlogin',
						method: 'POST'
					}, {
						dizhi: currentAddress,
						yqm: '' // 可以根据需要添加邀请码
					});

					if (loginResult[1].data.state === 'success') {
						// 更新token
						uni.setStorageSync("token", JSON.stringify(loginResult[1].data.token));
						
						// 获取新的用户信息
						await this.api.httpTokenRequest({
							url: '/user/GetUserInfo',
							method: 'GET'
						}, {}).then(res => {
							if (res[1].data.state === 'success') {
								uni.setStorageSync('userinfo', res[1].data.list[0]);
							}
						});

						this.$modal.msg(this.$t('wallet.payment.relogin_success'));
						
						// 重新执行支付流程
						setTimeout(() => {
							this.CreateOrder();
						}, 1000);
					} else {
						this.$modal.msg(loginResult[1].data.msg || this.$t('wallet.payment.relogin_failed'));
					}
				} catch (error) {
					console.error('重新登录失败:', error);
					this.$modal.msg(this.$t('wallet.payment.relogin_failed'));
				}
			}
		},

	}
</script>

<style>
	.container{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.list{
		width: 96%;
		display: flex;
		flex-direction: column;
		margin-left: 15rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.list-money{
		width: 96%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	.list-items{
		width: 180rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		border: 1rpx solid #9b9b9b;
	}
	.Active{
		border: 1rpx solid #a5abfc;
	}
	.list-item{
		width: 690rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.listimg{
		width: 450rpx;
		height: 350rpx;
	}
	.list-title{
		width: 94%;
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
		font-size: 32rpx;
	}
	.touzhi {
		width: 86%;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		/* background-color: #1b2587; */
		border: 1rpx solid #cee8fc;
		margin-top: 20rpx;
	}
	
	.touzhi1 {
		width: 100%;
		margin-top: 10rpx;
		font-size: 36rpx;
		font-weight: 700;
	}
	
	.touzhiinput {
		width: 92%;
		padding: 20rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		background-color: #000;
		border: 1rpx solid #e6e6e6;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.dizhi {
		width: 100%;
		font-size: 28rpx;
		margin-top: 30rpx;
		font-weight: 500;
	}
	
	.rishouyi {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.wenhao {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.wenhaoimg {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.touzhianniu {
		width: 90%;
		height: 80rpx;
		border: 1rpx solid #aef0f5;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	
	.touzhidingdan {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;
	
	}
	
	.touzhidingdan1 {
		font-size: 36rpx;
		font-weight: 700;
	}
	
	.touzhidingdan2 {
		width: 94%;
		padding: 20rpx;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #000;
		background-image: linear-gradient(to right, #101010 10%, #15217b 90%);
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
	
	.touzhizonger {
		display: flex;
		flex-direction: column;
		margin-left: 15rpx;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.touzhizonger1 {
		font-size: 42rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
	}
	
	.touzhiimg {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
	}
	
	.leiji {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	/* 奖励说明 */
	.jianli{
		width: 90%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.jianli1{
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
	.jianli12{
		width: 94%;
		padding: 20rpx;
		background-color: #2d2d32;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	

	.guizhe{
		width: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.shuoming{
		width: 96%;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.shuoming-cont{
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 36rpx;
		color: #e6e6e6;
	}
	/* 立即购买 */
	.lijizulin{
		width: 90%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin-top: 60rpx;
		border: 1rpx solid #aef0f5;
		font-size: 32rpx;
		font-weight: 700;
	}
	.lijizulin:active{
		border: 1rpx solid #79d7f0;
		background-color: #1b2587;
	}
	/* 弹窗 */
	.zulintk{
		width: 600rpx;
		height: 340rpx;
		padding: 20rpx;
		background-color: #22203f;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.guanbi{
		width: 100%;
		display: flex;
		justify-content: end;
	}
	.guanbi1{
		width: 50rpx;
		height: 50rpx;
	}
	.tktitle{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
	.zulinmoney{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		font-size: 48rpx;
		font-weight: 700;
		color: #79d7f0;
	}
	.zuanzhe{
		width: 98%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		
	}
	.zuanzhe1{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.zuanzhe2{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 25rpx;
	}
	.zuanzhe2-radio{
		transform:scale(0.8);
	}
	
	
	/* 确认购买 */
	.querenzulin{
		width: 80%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #aef0f5;
		border-radius: 20rpx;
		margin-top: 50rpx;
		margin-bottom: 40rpx;
	}
	

</style>